import React, { Component } from "react";

class Field extends Component{
    render() {
        return <div style={{background:"pink"}}>
            <label >{this.props.label}</label>
            <input type={this.props.type}  onChange={(evt)=>{
                console.log("evt",evt.target.value);
                this.props.onChangeEvt(evt.target.value)
              
            }}   value={this.props.value}/>
        </div>
    }
}
export default class App extends Component {
    state={
        username:localStorage.getItem("username"),
        password:""
    }
  render() {
    return <div>
        <h1>登录页面</h1>
        <Field label="用户名" type="text" onChangeEvt={(value)=>{
console.log("value",value);
this.setState({
    username:value
})
        }}  value={this.state.username}></Field>
        <Field label="密码" type="password" onChangeEvt={(value)=>{
      this.setState({
        password:value
    })
        }}  value={this.state.password}></Field>
        <button onClick={()=>{
console.log("username",this.state.username);
if(this.state.username != '' &&this.state.password != '' ){
    alert("正在登陆")
}

        }}>登錄</button>
        <button onClick={()=>{
 this.setState({
    password:''
})
this.setState({
    username:''
})
        }}>取消</button>
    </div>;
  }
}   
